<template>
	<u-popup :show="loginShow" @close="offClick">
		<view class="content-padding-layout">
			<view class="menu-padding-spac-y">
				<u-avatar src="/static/img/logo.jpg" size="90rpx" />
			</view>
			<view class="few-text-font menu-padding-spac-y">登录，享受完整服务</view>
			<view>
				<view class="menu-padding-spac-y">
					<u-button type="primary" @click="wxLogin">立即登录</u-button>
				</view>
				<u-button @click="offClick">暂不登录</u-button>
			</view>
		</view>
    </u-popup>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { wechatLogin, wechatUserInfo, getInfo } from "@/config/api.js"

export default {
	data() {
		return {}
	},
	computed: {
		...mapState(['loginShow'])
	},
	methods: {
		...mapMutations(['setLoginShow', 'setToken', 'setUser']),
		offClick() {
			this.setLoginShow(false)
		},
		wxLogin() {
			var that = this
			uni.login({
				provider: 'weixin',
				success: async (loginRes) => {
					if (loginRes.code) {
						const res = await wechatLogin({ code: loginRes.code })
						if (res && res.token) {
							that.setToken(res.token)
							that.getUserInfo()
							that.setLoginShow(false)
						}
					}
				},
				fail: (err) => {
					that.getUserInfo()
				}
			})
		},
		wxAuthorize() {
			var that = this
			uni.authorize({
				scope: 'scope.userInfo',
				success() {
					uni.getUserInfo({
						success: async (userInfoRes) => {
							await wechatUserInfo({ userInfo: userInfoRes.userInfo })
							that.getUserInfo()
						}
					})
				}
			})
		},
		async getUserInfo() {
			const res = await getInfo()
			if (res && res.user) {
				this.setUser(res.user)
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.content-padding-layout {
	padding: 32rpx;
	padding-bottom: 0;
}
.menu-padding-spac-y {
	padding: 8rpx 0;
}
.few-text-font {
	font-size: 26rpx;
	line-height: 32rpx;
	font-weight: 500;
}
</style>
